﻿<Page x:Class="RadioAnonymous.Pages.GalleryPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:RadioAnonymous.Pages"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="GridViewGalleryListViewTemplate">
            <Grid Margin="5,20,5,20"
                  HorizontalAlignment="Left"
                  Tapped="GridGalleryImageItemListView_Tapped">
                <Border BorderBrush="#aaaaaa" BorderThickness="1">
                    <Image Name="ImageGalleryImage"
                           Margin="5"
                           Source="{Binding Path=ImagePath}"
                           Stretch="UniformToFill" />
                </Border>
            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="GridViewGalleryFlipViewTemplate">
            <Image Name="ImageGalleryImage"
                   Margin="20,20,20,20"
                   Source="{Binding Path=ImagePath}"
                   Stretch="Uniform" />
        </DataTemplate>

        <!--  TODO: Delete this line if the key AppName is declared in App.xaml  -->
        <x:String x:Key="AppName">Творчество радиослушателей</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid x:Name="RootPanel"
          Background="#FFfcfcfc"
          Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  Back button and page title  -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="pageTitle"
                       Grid.Column="1"
                       Foreground="#996793"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Text="{StaticResource AppName}" />
            <Button Grid.Column="2"
                    Margin="0,0,36,0"
                    VerticalAlignment="Center"
                    Foreground="#996793"
                    Style="{StaticResource NextAppBarButtonStyle}"
                    Tapped="Button_Tapped" />
        </Grid>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="3*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <FlipView Name="FlipViewImageGallery"
                      ItemTemplate="{StaticResource GridViewGalleryFlipViewTemplate}"
                      ItemsSource="{Binding Path=Images}"
                      TabNavigation="Cycle" />

            <ScrollViewer Grid.Row="1"
                          Margin="0, 20, 0, 40"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Disabled">
                <ListView Name="ListViewImageGallery"
                          ItemContainerStyle="{StaticResource ListViewItemStyleNoSelection}"
                          ItemTemplate="{StaticResource GridViewGalleryListViewTemplate}"
                          ItemsSource="{Binding Path=Images}"
                          ScrollViewer.VerticalScrollBarVisibility="Disabled"
                          SelectedIndex="{Binding Path=SelectedIndex,
                                                  ElementName=FlipViewImageGallery,
                                                  Mode=TwoWay}"
                          SelectionMode="Single"
                          TabNavigation="Cycle">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>
